<template>
  <section class="todoapp">
    <todoHead @add="add" />
    <todoMain :list="list" @del="del" :type="type" @fun="fun" />
    <todoFooter :list="list" @clear="clear" :type="type" @change="change" />
  </section>
</template>

<script>
import todoHead from './components/todoHead.vue'
import todoMain from './components/todoMain.vue'
import todoFooter from './components/todoFooter.vue'
export default {
  components: {
    todoHead,
    todoMain,
    todoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('todos')) || [],
      type: 'all',
    }
  },
  methods: {
    del(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    add(name) {
      this.list.unshift({
        id: crypto.randomUUID(),
        name,
        isDone: false,
      })
    },
    clear() {
      this.list = this.list.filter((item) => !item.isDone)
    },
    change(type) {
      this.type = type
    },
    fun(newValue) {
      return this.list.forEach((item) => (item.isDone = newValue))
    },
  },
  watch: {
    list: {
      handler(newValue) {
        localStorage.setItem('todos', JSON.stringify(newValue))
      },
      deep: true,
    },
  },
}
</script>

<style></style>
